<template>
  <div id="dept-chart">
    <div class="dept-chart-title">本月科室消耗TOP5
    </div>
    <dv-charts :option="option" style="margin-top: -10px;" v-show="!showNoRecord"/>
    <div class="noRecord" v-show="showNoRecord">本月暂无消耗数据
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeptChart',
  data() {
    return {
      option: {},
      showNoRecord: false
    }
  },
  methods: {
    async createData() {
      let dataX = []
      let dataY = []
      await this.$ajax.get('/finance/bill/findThisMonthDeptUse').then(resp => {
        if (resp.code != 0) {
          global.utilMessage.alertFail(`获取本月科室消耗发生错误：${resp.msg}`)
          return
        }
        if (resp.data.length > 0) {
          this.showNoRecord = false
          let data = resp.data.sort((d1, d2) => d1.amount - d2.amount)
          data.forEach(o => {
            dataX.push(o.deptName)
            dataY.push(+(o.amount / 10000).toFixed(2))
          })
          this.option = {
            color: ['#2f89cf'],
            grid: {
              left: '20',
              top: '5%'
            },
            legend: {
              top: 0
            },
            xAxis: {
              type: 'value',
              name: '金额(万元)',
              data: 'value',
              nameGap: 25,
              min: 0,
              nameLocation: 'center',
              nameTextStyle: {
                fill: '#fff',
                fontSize: 15
              },
              axisLabel: {
                style: {
                  fill: '#fff'
                }
              }
            },
            yAxis: {
              name: '科室',
              data: dataX,
              nameGap: 30,
              nameTextStyle: {
                fill: '#fff',
                fontSize: 15
              },
              axisLabel: {
                style: {
                  fill: '#fff',
                  fontSize: 12
                }
              }
            },
            series: [{
              data: dataY,
              type: 'bar',
              barWidth: '100%',
              animationCurve: 'easeOutBack',
              label: {
                show: true,
                formatter: '{value}',
                offset: [20, 0],
                style: {
                  fontSize: 16,
                  fill: '#40faee'
                }
              },
            }]
          }
        } else {
          this.showNoRecord = true
        }
      })
    },
  },
  mounted() {
    const { createData } = this

    createData()

    setInterval(createData, 1800000)
  }
}
</script>

<style lang="scss">
#dept-chart {
  width: 100%;
  height: 30%;
  margin-bottom: 10px;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  box-sizing: border-box;

  .dept-chart-title {
    height: 10%;
    font-weight: bold;
    //将段落的第一行缩进 20 像素
    text-indent: 20px;
    font-size: 20px;
    display: flex;
    //居中对齐弹性盒的各项 <div> 元素
    align-items: center;
  }

  .noRecord {
    height: 80%;
    width: 100%;
    text-align: center;
    margin-top: 5%;
    font-size: 20px;
  }
}
</style>
